{% extends 'base.html' %}
{% block content %}
<style>
        .big-box-2 {
            width: 100%;
            display: flex;
        }
        div {
            border-radius: 5px;
        }
        a {
            color: white;
            text-decoration: none;
        }
        a:hover {
            color: red;
        }
        .left-box {
            width: 900px;
            margin-left: 180px;
        }
        .l1 {
            width: 900px;
            display: inline-block;
            border-bottom: #c9c7c5 dashed 2px;
        }
        .l1>h1 {
            font-size: 40px;
        }
        .l1>p {
            margin-top: 70px;
        }
        .l2 {
            width: 900px;
            display: inline-block;
            height: 200px;
            border-bottom: #c9c7c5 dashed 2px;
        }
        .l2>p {
            margin-top: 15px;
        }
        .l2>a {
            text-decoration: none;
            color: #6e6e6e;
            margin-left: 60px;
            margin-top: -20px;
            display: flex;
        }
        .text {
            width: 65px;
        }
        .l3 {
            width: 900px;
            display: inline-block;
            border-bottom: #c9c7c5 dashed 2px;
        }
        .nicheng {
            width: 900px;
            margin-top: 10px;
        }
        .nicheng>label {
            font-size: 20px;
            margin-left: 20px;
            display: flex;
        }
        .pinglun {
            width: 900px;
            margin-top: 10px;
        }
        .pinglun>label {
            font-size: 20px;
            margin-left: 20px;
            display: flex;
        }
        .tishi {
            margin-left: 105px;
            font-size: 10px;
            color: #c9c7c5;
            margin-top: 10px;
        }
        .l3>button {
            margin-left: 755px;
            margin-top: -5px;
            height: 30px;
            width: 85px;
            font-size: 20px;
            color: white;
            background: #c1faff;
            border: 0;
            border-radius: 3px;
            margin-bottom: 10px;
        }
        .l3>button:hover {
            color: black;
        }
        .l4 {
            width: 900px;
            display: inline-block;
            border-bottom: #c9c7c5 dashed 2px;
        }
        .l4>img {
            margin-top: 20px;
            margin-left: 20px;
        }
        .qiang {
            width: 500px;
            display: flex;
            margin-left: 110px;
            margin-top: -79px;
        }
        .l4>span {
            margin-left: 748px;
            display: flex;
            margin-top: -20px;
        }
        .l4>p {
            margin-left: 108px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .right-box {
            width: 485px;
            border: black solid 1px;
            margin-left: 20px;
        }
    </style>
<div class="big-box-2">
    <div class="left-box">
        <div class="l1">
            <h1>{{article.headline}}</h1>
            <br>
            <span>作者：{{article.nickname}}</span>&nbsp;&nbsp;
            <span>类别：{{article.type}}</span>&nbsp;&nbsp;
            <span>日期：{{article.createtime}}</span>&nbsp;&nbsp;
            <span>阅读：{{article.readcount}}次</span>&nbsp;&nbsp;
            <span>消耗积分：{{article.credit}}分</span>&nbsp;&nbsp;
            <br>
            <p>{{article.content | safe}}</p>
            <br>
        </div>
        <div class="l2">
            <p>版权所有，转载本站文章请注明出处：蜗牛笔记，https://www.woniubiji.com</p>
            <br>
            <p class="text">上一篇：</p>
            <a href="#">Python中利用装饰器实现复杂函数功能</a>
            <br>
            <p class="text">下一篇：</p>
            <a href="#">Python中利用装饰器实现复杂函数功能</a>
        </div>
        <div class="l3">
            <div class="nicheng">
                <label for="nickname" style="height: 25px">你的昵称:
                <input type="text" placeholder="强哥" style="margin-left: 15px">
                    </label>
            </div>
            <div class="pinglun">
                <label for="comment">你的评论:
                    <textarea type="text" placeholder="请在此留下你的真诚的、感人的、发自肺腑的赞美之词。" style="height: 200px;width: 750px;font-size:15px;margin-top: 5px;margin-left: 15px"></textarea>
                    </label>
            </div>
            <div class="tishi">
                提示：登陆后添加有效评论可以获得积分哦
            </div>
            <button type="button">提交评论</button>
        </div>
        <div class="l4">
            <img src="/img/5P08UK(B@BL%5DRJP1G_UAAH1_tmb.jpg" alt="" width="70" height="70">
            <div class="qiang">强哥&nbsp;&nbsp;&nbsp;2020-02-06&nbsp;15:58:10</div>
            <span>赞成(185)&nbsp;&nbsp;&nbsp;反对(12)</span>
            <p>感谢作者的无私奉献，这是一条真诚表达感谢的评论;</p>
        </div>
    </div>
</div>
{% endblock %}
